<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="clickUpdate(1)">新建优惠券</el-button>
        </div>

        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">优惠券名称：</span>
                <el-input placeholder="输入优惠券名称" v-model.trim="cou_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">
                    <span v-if="tabName == 0 || tabName == 3">有效</span>
                    <span v-if="tabName == 1 || tabName == 2">{{ tabName == 1 ? "领取" : "使用" }}</span
                    >时间：
                </span>
                <el-date-picker
                    v-model="area_time"
                    type="datetimerange"
                    unlink-panels
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                />
            </div>
            <div class="task-one__btn">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabarr" :key="item.name">
                <template v-if="tabName == 0 || tabName == 3">
                    <el-table
                        class="table-mb"
                        v-loading="loading"
                        :data="arr_data"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                    >
                        <el-table-column prop="title" label="优惠券名称"></el-table-column>
                        <el-table-column label="订单金额">
                            <template #default="{ row }">
                                <p class="table-price"><em>￥</em>{{ row.order_amount }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="面值">
                            <template #default="{ row }">
                                <p class="table-price"><em>￥</em>{{ row.coupon_amount }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="有效期" width="170">
                            <template #default="{ row }">
                                <p>{{ row.s_time_label }}</p>
                                <p>至</p>
                                <p>{{ row.l_time_label }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sku" label="剩余(张)"></el-table-column>
                        <el-table-column prop="picked" label="已领取(张)"></el-table-column>
                        <el-table-column prop="use_count" label="已使用(张)"></el-table-column>
                        <el-table-column label="操作" width="170" class-name="operation-nav" fixed="right">
                            <template #default="{ row }">
                                <el-button link type="primary" class="theme-btn" @click="clickUpdate(2, row)" v-if="tabName == 0">编辑</el-button>
                                <el-popconfirm
                                    title="是否确定删除？"
                                    confirm-button-text="确定"
                                    cancel-button-text="取消"
                                    @confirm="clickDelOne(row)"
                                >
                                    <template #reference>
                                        <el-button link type="primary" class="theme-btn">删除</el-button>
                                    </template>
                                </el-popconfirm>
                                <el-button
                                    link
                                    type="primary"
                                    class="theme-btn"
                                    v-if="tabName == 0 || tabName == 3"
                                    @click="row.status == 0 ? clickVoid(row, 1) : clickVoid(row, 0)"
                                >
                                    {{ row.status == 0 ? "作废" : "启用" }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else>
                    <el-table
                        class="table-mb"
                        v-loading="loading"
                        :data="arr_data"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                    >
                        <el-table-column prop="title" label="优惠券名称"></el-table-column>
                        <el-table-column label="订单金额">
                            <template #default="{ row }">
                                <p class="table-price"><em>￥</em>{{ row.order_amount }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="面值">
                            <template #default="{ row }">
                                <p class="table-price"><em>￥</em>{{ row.coupon_amount }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="领取人" width="300">
                            <template #default="{ row }">
                                <p>{{ row.nickname }}</p>
                                <p>UID：{{ row.uid }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status_label" label="使用状态"></el-table-column>
                        <el-table-column label="使用时间" width="190">
                            <template #default="{ row }">
                                <p>{{ row.status == 0 ? '-' : row.use_time_label }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="created_at_label" label="领取时间" width="190"></el-table-column>
                    </el-table>
                </template>
                <!-- 分页 -->
                <el-pagination
                    background
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeNum"
                    :total="totalNums"
                    layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRouter } from "vue-router"
import GoBack from "@components/GoBack.vue"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"

const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        title: cou_name.value,
    }
    // tabName：0、3分别是优惠券列表和作废列表，1、2分别是已领取，已使用
    if (tabName.value == 0 || tabName.value == 3) {
        params.status = tabName.value == 0 ? 0 : 1 // 启用状态[0:已启用,1:已作废]
    } else {
        params.status = tabName.value == 1 ? 0 : 1 // 使用状态[0:未使用,1:已使用]
    }

    if (tabName.value == 2) {
        params.u_s_time = area_time.value ? area_time.value[0] : ""
        params.u_l_time = area_time.value ? area_time.value[1] : ""
    } else {
        params.s_time = area_time.value ? area_time.value[0] : ""
        params.l_time = area_time.value ? area_time.value[1] : ""
    }
    let urls = tabName.value == 0 || tabName.value == 3 ? "coupon/index" : "coupon/sign"
    getdata(urls, params)
}

// 搜索
const cou_name = ref("")
const area_time = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * tab切换
 * @param {String} tabName 当前index
 * @param {Array} tabarr 数组
 */
const tabName = ref("0")
const tabarr = ref([
    {
        label: "优惠券",
        name: "0",
    },
    {
        label: "发放记录",
        name: "1",
    },
    {
        label: "使用记录",
        name: "2",
    },
    {
        label: "作废记录",
        name: "3",
    },
])
const handleTab = (pane) => {
    tabName.value = pane.index
    area_time.value = ""
    pageSize.value = 10
    pubRefreshParams(getList)
    // if (pane.index == 0 || pane.index == 3) {

    // } else {
    //     arr_data.value = ref([
    //         {
    //             title: "满200可用",
    //             order_price: "200.00",
    //             face_price: "50.00",
    //             user_name: "张三",
    //             uid: 12345,
    //             user_status_label: "已使用",
    //             created_at_label: "2022-09-29 10:53:31",
    //             receive_at_label: "2022-09-13 19:50:21",
    //             coupon_id: 1,
    //         },
    //     ])
    // }
}

const clickUpdate = (type, row) => {
    let query = {
        type: 1,
    }
    if (type == 2) {
        query.type = 2
        query.cid = row.coupon_id
    }
    router.push({
        path: "/Marketing/CouponGiveUpdate",
        query,
    })
}

// 作废/启用，[0:已启用,1:已作废]
const clickVoid = (row, type) => {
    proxy.$axios
        .post("coupon/status", {
            coupon_id: row.coupon_id,
            status: type,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 优惠券删除
const clickDelOne = (row) => {
    proxy.$axios
        .post("coupon/delete", {
            coupon_id: row.coupon_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "CouponList",
}
</script>

<style lang="less" scoped>
.table-price {
    font-size: @font-size-md;
    em {
        font-size: 13px;
    }
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
